<template>
    <div class='imageViewItems' ref="imageViewItems">
        <image-view-item-child ref="imageViewChild" :imageHeight="imgHeight" class='imageViewItemchild' :isWidths="ids.length==1 ? 'Y':'N'" v-for="(id_,index) in ids" :key="index" :heights="heights" :id="id_" :data="data" :isreadonly="isreadonly" :appid="appid" :label="lablels[index]" @mainDevs="mainDevs" @childDevs="childDevs" :ref="id_" :exkey="exkeys[index]"></image-view-item-child>
        <el-dialog
            title="高拍仪上传2"
            :visible.sync="dialogVisible2"
            :width="htWidth"
            append-to-body
            :style="{'left':aLeft}"
            >
            <high-shot-img  :show="dialogVisible2" :appid="appid" :showType="showType" @closes="closes" @uploadImg="uploadImg" v-if="isLt&&dialogVisible2" :params="params"></high-shot-img>
            <high-shotjy ref="highshotjy"  :appid="appid" :showType="showType" @closes="closes" @uploadImg="uploadImg" v-if="isJY&&dialogVisible2"  :params="params"></high-shotjy>
            <high-shotlt ref="highshotjy"  :appid="appid" :showType="showType" @closes="closes" @uploadImg="uploadImg" v-if="isLtGF&&dialogVisible2"  :params="params"></high-shotlt>
            <high-shotkm ref="highshotjy"  :appid="appid" :showType="showType" @closes="closes" @uploadImg="uploadImg" v-if="isKm&&isKms"  :params="params"></high-shotkm>
            
        </el-dialog>
       
    </div>
</template>
<script>
import HighShotImg from '../highShot/HighShotImg.vue'
import HighShotjy from '../highShot/HighShotjy.vue'
import HighShotlt from '../highShot/HighShotlt.vue'
import ImageViewItemChild from './ImageViewItemChild.vue'
export default {
    name:'imageViewItem',
    props:['images','heights','id','data','index','isreadonly',"appid","label","width","exkey"],
    components:{
        HighShotImg,
        ImageViewItemChild,
        HighShotjy,
        HighShotlt,
        HighShotkm: resolve => {require(['../highShot/HighShotkm.vue'], resolve)}
    },
    data(){
        return{
            url:'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            showViewer:true,
            dialogVisible2:false,
            isKms:false,
            showType:"main",
            ids:[],
            lablels:[],
            rstId:"",
            isLt:false,
            isJY:false,
            isLtGF:false,
            isKm:false,
            exkeys:[],
            params:{},
            isClose:"N",
            htWidth:"90%",
            aLeft:"5%",
            imgHeight:""
        }
    },
    created(){
        
        this.ids=this.id.split("#");
        this.lablels=this.label.split("#");
        let isOk=false;
        if(!this.exkey){
            for(let i=0;i<this.ids.length;i++){
                this.exkeys.push({});
            }
        }else{
            this.exkeys=this.exkey;
        }
        try{
            if(this.exkey.imgHeight){
                this.imgHeight=this.exkey.imgHeight;
            }
        }catch(e){}
       // alert(this.exkey.imgHeight)
        try{
            if(this.exkey.type){
                if(this.exkey.type=="jy"){
                    this.isJY=true;
                    isOk=true;
                   
                }else if(this.exkey.type=="lt"){
                    this.isLtGF=true;
                    isOk=true;
                   
                }else if(this.exkey.type=="km"){
                    this.isKm=true;
                    isOk=true;
                    this.htWidth="80%"
                    this.aLeft="10%"
                }else{
                    this.isLt=true;
                }
                this.exkeys=this.exkey.data;
                if(!this.exkey.data){
                    this.exkeys=[];
                    for(let i=0;i<this.ids.length;i++){
                            this.exkeys.push({});
                        }
                }
            }
            if(this.exkey.data){
                this.exkeys=this.exkey.data;
            }
        }catch(e){

        }
        if(!isOk){
            this.isLt=true;
        }


      
    },
    mounted(){
        this.$refs.imageViewItems.parentNode.style.width="100%"
    },
    methods:{
        setData(){
          
            let elm=this.$refs.imageViewChild;
            console.log(elm,"elm===============================")
            if(elm){
                for(let i=0;i<elm.length;i++){
                    elm[0].setData(true);
                }
            }
           
        },
        closeViewer() {
          this.showViewer = false
        },
        closes(){
            this.dialogVisible2=false;
        },
        mainDevs(data){
            let item=JSON.parse(data);
            this.showType="main";
            this.rstId=item.id;
            this.params.id=item.keyId;
            this.params.model=item.model;
            this.params.type=item.type;
            this.params.token=item.token;
            this.params.name=item.name;
            this.params.names=item.names;
            this.params.isCJ=item.isCJ;
            if(item.isClose){
                this.isClose=item.isClose;
            }
            this.dialogVisible2=true;
            this.isKms=true;
        },  
        childDevs(data){
            let item=JSON.parse(data);
            this.dialogVisible2=true;
            this.isKms=true;
            this.showType="child";
            this.params.id=item.keyId;
            this.params.model=item.model;
            this.params.type=item.type;
            this.params.token=item.token;
            this.params.name=item.name;
            this.params.names=item.names;
        },
        uploadImg(data){
            this.$refs[this.rstId][0].uploadImg(data)
            if(this.isClose=="Y"){
                this.dialogVisible2=false;
            }
            //this.uploaded(JSON.parse(data));
        }
    },
    watch:{
        dialogVisible2(val){
            if(!val){
                try{
                    this.$refs.highshotjy.closess();
                }catch(e){}
                this.isKms=false;

            }
        }
    }
}
</script>
<style>
.imageViewItems{
    width:100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.imageViewItemchild{
    display:inline-block;
    
}
</style>